<template>
  <div class="v-setchat">
    <div id="seatMap">
      <div class="seat-charts-row" v-for="(item,x) in seatOrder" ref="seatX" :key="x">
        <a @click="selectItem(x+1,y+1,subItem)" :data-key="(x+1)+'_'+(y+1)" :data-x="x+1" :data-y="y+1" :data-code="subItem" class="allPublicGray"
           :class="getItemClass(x+1,y+1,subItem)"
           href="javascript:;"
           v-for="(subItem,y) in getItems(item)" :key="y">
          <i class="zwicon " :class="getIconClass(x+1,y+1)" v-if="subItem !='_'"></i>
          <span v-else></span>
        </a>
      </div>
    </div>

  </div>
</template>
<style type="type/scss" lang="scss">
@import "./fonts/iconfont.css";

a.empty-item{
  cursor: default;
}
a.available{
  color: #0db40d;
}
a.selected{
  color: #032403;
}
a.unavailable{
  color: #ac2925;
  cursor: not-allowed;
}

#seatMap {
  width: 100%;
  position: relative;
  .seat-charts-row {
    margin-bottom: 20px;
  }
  .allPublicGray {
    width: 24px;
    height: 24px;
    display: inline-block;
    margin-right: 7px;
    text-align: center;
    line-height: 24px;
    font-size: 18px;
  }
  .bgBlack {
    background: #ffffff no-repeat;
    background-size: 18px;
  }
}


</style>
<script>
var seatOrder = [
  "_____aaaaa_____aaaa_____aaaa____",
  "___ccccccc____cccccc____ccccc___",
  "__aaaaaaaa___aaaaaaaa___aaaaaa__",
  "__cccccccc__bbbbbbbbbb__ccccccc_",
  "_aaccccccc_bbbbbbbbbbbb_ccccccca",
  "_aaccccccc_bbbbbbbbbbbb_ccccccca",
  "________________________________",
  "_aaaaaaaaa__cccccccccc__aaaaaaaa",
  "_aaaaaaaaa__cccccccccc__aaaaaaaa",
  "__aaaaaaaa___aaaaaaaa___aaaaaaa_",
  "__aaaaaaaa___aaaaaaaa___aaaaaaa_"
]
import {inArray,isArray} from "@/utils/extend";

export default {
  name: "v-seat-chat",
  data() {
    return {
      //seatOrder,
      selected: {}, // 当前选中项、使用对象方式
      /**
       * 三个状态：0为可选 、1已选、2、不可选
       */
      success: 1,
      off: 2,
    }
  },
  props: {
    modelValue: {
      type: String
    },
    map: {
      type: [Array,String],
      default() {
        return [];
      }
    },
    unavailable: {
      type: String
    },
    seatOption: {
      type: Object,
      default() {
        return {
          a: {
            price: 10,
            class: 'seat-a'
          },
          available: { // 可选时状态
            class: 'available'
          },
          selected: {
            // 选中状态
            class: 'selected'
          },
          unavailable: {
            class: 'unavailable'
          }
        }
      }
    }
  },
  watch: {
  },
  computed: {
    seatOrder(){
      var map = this.map;
      if(!map){
        return [];
      }
      if(isArray(map)){
        return map;
      }
      var arr = map.split("\n");
      return arr.filter(s=>s);
    }
  },
  emits:['update:modelValue','change-item'],
  methods: {
    isSelected(x,y){
      if(!this.modelValue){
        return false;
      }
      var k = this.getKey(x,y);
      return inArray(k , this.modelValue.split(',')) //(this.modelValue.indexOf(k) != -1)
    },
    isUnavailable(x,y){
      if(!this.unavailable){
        return false;
      }
      var k = this.getKey(x,y);
      return inArray(k,this.unavailable.split(',')) //(this.unavailable.indexOf(k) != -1);
    },
    getItemClass(x,y,item){
      if(item == '_'){
        return "empty-item";
      }
      var isUnavailable = this.isUnavailable(x,y);
      var option = this.seatOption;

      if(isUnavailable){
        return option["unavailable"].class;
      }

      var isSelected = this.isSelected(x,y);
      var result = [];
      if(option[item]){
        result.push(option[item].class);
      }
      if ( isSelected ) {
        result.push(option.selected.class);
      }else{
        result.push(option['available'].class)
      }
      return result;
    },
    getIconClass(x,y){
      if(this.isUnavailable(x,y)){
        return 'zwicon-yixuanzuowei2';
      }
      if(this.isSelected(x,y)){
        return 'zwicon-xuanzuoyixuan-yixuan';
      }else{
        return 'zwicon-zuowei-sort';
      }
    },
    getItems(item) {              //  将字符串转成一个数组的方法，遍历数组中每一个元素
      return item.match(/[a-z_]{1}(\[[0-9a-z_]{0,}(,[0-9a-z_ ]+)?\])?/gi);
    },
    selectItem( x , y , code ){
      if(this.isUnavailable(x,y)){
        return;
      }
      if(code == '_'){
        return;
      }

      var k = this.getKey(x,y);
      var values = this.modelValue.split(',');
      if(this.isSelected(x,y)){
        for (var i in values){
          if(values[i] === k)
          {
            values.splice(i,1);
            break;
          }
        }
      }else{
        values.push(k);
      }
      var vs = values.filter(v=>v);
      this.$emit('update:modelValue' , vs.join(","));
      var result = this.changeItem(vs);
      this.$emit('change-item' , result );
    },
    getSelectItems(){
      var values = this.modelValue.split(",");
      return this.changeItem(values);
    },
    changeItem( values ){
      var result = [];
      var seatX = this.$refs.seatX;
      for ( var i in values ){

        var arr = values[i].split("_");
        var x = Math.floor(arr[0]) - 1 , y=arr[1];

        var el = seatX[x].querySelector('[data-key="'+values[i]+'"]');
        var c = el.getAttribute('data-code');
        var config = this.seatOption[c];
        var item = {
          x: x,
          y: y,
          status: 'selected',
          code: c,
          item: config // 选项信息
        };
        result.push(item);
      }
      return result;

    },
    getKey(x, y) {
      return x + '_' + y;
    },
  },
  created() {
  },
  mounted() {
  },
  destroyed() {
  }
}
</script>